<script setup lang='ts'>
import { ElMessage, FormInstance } from "element-plus";
import { ref, reactive, watch, computed, onBeforeUnmount } from "vue";
import { emitter } from "@/utils/mitt";
const RefArry = ref([]);
function numType(row) {
  let a = null;
  switch (row.sortNo) {
    case 3:
      a = '年'
      break;
    case 4:
      a = '年'
      break;
    case 5:
    case 6:
      a = 'h'
      break;
    case 7:
      a = 'min'
      break;
    case 8:
    case 9:
    case 10:
    case 13:
    case 14:
      a = '次'
      break;
    case 11:
      a = 'Km/h'
      break;
    case 12:
      a = 'm/s²'
      break;
  }
  return a
}
const prop = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});

// TODO:重新封装对象
function setRefDataList(els) {
  let Arry = [];
  els.forEach(data => {
    if (data.sortNo === 1) {
      Arry.push({
        select: data.dictName,
        dictValue: data.dictValue,
        dictId: data.dictId,
        sortNo: data.sortNo,
        weight: null,
        child: [
          {
            paramChild: "男",
            score: null
          }, {
            paramChild: "女",
            score: null
          }
        ]
      })
    } else if (data.sortNo === 2) {
      Arry.push({
        select: data.dictName,
        dictValue: data.dictValue,
        dictId: data.dictId,
        sortNo: data.sortNo,
        weight: null,
        child: [
          {
            paramChild: "家庭自用车",
            score: null
          }, {
            paramChild: "非营业用客车",
            score: null
          }, {
            paramChild: "营业用客车",
            score: null
          }, {
            paramChild: "非营业用货车",
            score: null
          }, {
            paramChild: "营业用货车",
            score: null
          }, {
            paramChild: "特种车型",
            score: null
          }
        ]
      })
    } else {
      Arry.push({
        select: data.dictName,
        dictValue: data.dictValue,
        dictId: data.dictId,
        sortNo: data.sortNo,
        weight: null,
        child: [
          {
            paramChild: [],
            score: null
          }, {
            paramChild: [],
            score: null
          }, {
            paramChild: [],
            score: null
          }
        ]
      })
    };
  });
  console.log("arry", Arry)
  RefArry.value = Arry
}

function HandBlur(event) {
  if (Number(event.score) < 0.5) {
    event.score = 0.5
  } else if (Number(event.score) > 1.5) {
    event.score = 1.5
  }
}

function HandBlurs(event) {
  if (Number(event.paramChild[0]) < 0) {
    event.paramChild[0] = 0
  }
  if (Number(event.paramChild[1]) < 0) {
    event.paramChild[1] = 1
  }
  if (event.paramChild[0] >= event.paramChild[1]) {
    event.paramChild[1] = event.paramChild[0] + 1
  }
}

// 传数据给父组件
emitter.on("StubimToFather", () => {
  StubimToFather()
})
function StubimToFather() {
  let hanEnded = false;
  if (RefArry.value.length < 3) {
    ElMessage.warning("至少选择3个参数");
    return
  }
  RefArry.value.forEach((el) => {
    el.child.forEach((rs) => {
      if (rs.score === null || rs.score === '') {
        hanEnded = true;
        return;
      }
    })
  });
  if (hanEnded) {
    ElMessage.warning("请填完所有选项");
    return;
  }
  const nums = RefArry.value.reduce((total, obj) => total + Number(obj.weight), 0);
  if (nums !== 100) {
    ElMessage.warning('权重之和必需等于100%');
    return
  }
  const Arry = Array.from(RefArry.value);
  const Arrys = Arry.map(el => {
    // 进行操作时不会修改原始数组 Arry 或 RefArry.value
    const updatedEl = { ...el }; // 对象也进行浅拷贝
    updatedEl.child = el.child.map(e => {
      if (Array.isArray(e.paramChild)) {
        return { ...e, paramChild: e.paramChild.join('-') };
      }
      return e;
    });
    return updatedEl;
  });
  emitter.emit("StubimToFatherData", Arrys);
}

// 不能小于1
function SetKmark1(event) {
  if (event.weight < 0) {
    event.weight = 0
  }
}
watch(prop, newval => {
  setRefDataList(newval.data)
}, { deep: true, immediate: true })

onBeforeUnmount(() => {
  emitter.off("StubimToFather")
})
</script>

<template>
  <div>
    <el-scrollbar height="340px">
      <div class="insu_tips">
        <h4>注：</h4>
        <p>1.至少选择3个参数，每个参数输入分数区间为0.5-1.5，权重合计为100%；</p>
        <p>2.投保人及车辆风险越低，自主定价系数则越低，对应保费越低。</p>
      </div>

      <el-form :model="RefArry">
        <table class="select_table">
          <thead>
            <tr class="st_tr">
              <th>序号</th>
              <th>参数</th>
              <th>详情</th>
              <th>权重</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(t, u) in RefArry" :key="u">
              <tr class="st_tr" v-if="t.sortNo === 1">
                <td>{{ u + 1 }}</td>
                <td>{{ t.dictValue }}</td>
                <td>
                  <div class="st_tr_flex">
                    <el-form-item class="ItemType" v-for="(q, w) in t.child" :key="w" :label="q.paramChild"
                      :prop="t.score">
                      <el-input type="number" v-model.number="q.score" @blur="HandBlur(q)" size="small"
                        style="width:60px;" />
                    </el-form-item>
                  </div>
                </td>
                <td>
                  <el-form-item class="ItemType">
                    <el-input size="small" type="number" v-model.number="t.weight" style="width:60px;"
                      @blur="SetKmark1(t)">
                      <template #append>
                        %
                      </template>
                    </el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr class="st_tr" v-if="t.sortNo === 2">
                <td>{{ u + 1 }}</td>
                <td>{{ t.dictValue }}</td>
                <td>
                  <div class="st_tr_flex">
                    <el-form-item class="ItemType" v-for="(q, w) in t.child" :key="w" :label="q.paramChild"
                      :prop="t.score">
                      <el-input type="number" v-model.number="q.score" @blur="HandBlur(q)" size="small"
                        style="width:60px;" />
                    </el-form-item>
                  </div>
                </td>
                <td>
                  <el-form-item class="ItemType" :prop="t.weight">
                    <el-input size="small" type="number" v-model.number="t.weight" style="width:60px;"
                      @blur="SetKmark1(t)">
                      <template #append>
                        %
                      </template>
                    </el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr class="st_tr" v-if="!(t.sortNo === 1 || t.sortNo === 2)">
                <td>{{ u + 1 }}</td>
                <td>{{ t.dictValue }}</td>
                <td>
                  <div class="st_tr_flex">
                    <ul v-for="(q, w) in t.child" :key="w" class="st_tr_flex">
                      <el-form-item class="ItemType" :prop="q.paramChild[0]">
                        <el-input type="number" v-model.number="q.paramChild[0]" size="small" @blur="HandBlurs(q)"
                          style="width:50px;" />
                      </el-form-item>
                      <span class="str_span">-</span>
                      <el-form-item class="ItemType" :prop="q.paramChild[1]">
                        <el-input type="number" v-model.number="q.paramChild[1]" size="small" @blur="HandBlurs(q)"
                          style="width:50px;" />
                      </el-form-item>
                      <span class="str_span">{{ numType(t) }}</span>
                      <el-form-item class="ItemType" :prop="q.score">
                        <el-input type="number" v-model.number="q.score" @blur="HandBlur(q)" size="small"
                          style="width:60px;" />
                      </el-form-item>
                    </ul>
                  </div>
                </td>
                <td>
                  <el-form-item class="ItemType" :prop="t.weight">
                    <el-input size="small" type="number" v-model.number="t.weight" style="width:60px;"
                      @blur="SetKmark1(t)">
                      <template #append>
                        %
                      </template>
                    </el-input>
                  </el-form-item>
                </td>
              </tr>
            </template>

          </tbody>
        </table>
      </el-form>

    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.select_table {
  width: 100%;

  th,
  td {
    border: 1px solid #ccc;
    line-height: 28px;
    font-size: 14px;
    text-align: center;
  }

  .st_tr {

    th,
    td {
      &:nth-child(1) {
        width: 12%;
      }

      &:nth-child(2) {
        width: 25%;
      }

      &:nth-child(3) {
        width: 50%;
      }

      &:nth-child(4) {
        width: 15%;
      }
    }
  }

  .st_tr_flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .str_span {
    margin: 0 10px;
  }

  .ItemType {
    margin-bottom: 0;
  }
}

.insu_tips {
  text-align: left;
  margin: 5px;
  font-size: 14px;
}

:deep(.el-input-group__append) {
  background-color: transparent;
  padding: 2px;
}
</style>
